<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
  <title>goog.ui.ColorPicker</title>
  <script src="../base.js"></script>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/colorpicker-simplegrid.css">
  <script>
    goog.require('goog.ui.ColorPicker');
    goog.require('goog.dom');
  </script>
</head>
<body>
  <h1>goog.ui.ColorPicker</h1>

  <p>Simple Color Grid</p>
  <div id="colorpicker02"></div>
  <p id="picker02message"></p>

  <script>
    var picker02 = new goog.ui.ColorPicker.createSimpleColorGrid();
    picker02.render(goog.dom.getElement('colorpicker02'));

    goog.events.listen(picker02, goog.ui.ColorPicker.EventType.CHANGE,
      function(event) {
        var color = event.target.getSelectedColor() || '#000000';
        var el = goog.dom.getElement('picker02message');
        el.innerHTML = 'You selected: ' + color;
        el.style.color = color;
      });
  </script>
</body>
</html>
